<div [dMovable]="true" [handle]="header" [moveEl]="parent">
  <div class="modal-header" #header>
    <d-row [dGutter]="[12, 12]">
      <d-col [dSpan]="22">
        {{ 'app.common.operate.new.title' | translate: data.title }}
      </d-col>
      <d-col [dSpan]="2" style="text-align: right">
        <d-button
          icon="icon-close"
          bsStyle="text-dark"
          title="{{ 'app.common.operate.close.label' | translate }}"
          (btnClick)="data.onClose()"
        ></d-button>
      </d-col>
    </d-row>
  </div>
  <form dForm ngForm [layout]="formLayout" [dValidateRules]="formConfig.rule" #form="dValidateRules" (dSubmit)="submitForm($event)">
    <div class="modal-body" style="padding: 0px 48px 0px 48px">
      <d-form-item>
        <d-form-label [required]="true">{{ 'stdata.elementCode' | translate }}</d-form-label>
        <d-form-control>
          <input dTextInput name="elementCode" [(ngModel)]="formData.elementCode" [dValidateRules]="formConfig.elementCodeRules" />
        </d-form-control>
      </d-form-item>
      <d-form-item>
        <d-form-label [required]="true">{{ 'stdata.elementName' | translate }}</d-form-label>
        <d-form-control>
          <input dTextInput name="elementName" [(ngModel)]="formData.elementName" [dValidateRules]="formConfig.elementNameRules" />
        </d-form-control>
      </d-form-item>
      <d-form-item>
        <d-form-label [required]="true">{{ 'stdata.dataType' | translate }}</d-form-label>
        <d-form-control>
          <d-select
            [options]="dataTypeList"
            name="dataType"
            [filterKey]="'label'"
            [allowClear]="false"
            [(ngModel)]="formData.dataType"
            [dValidateRules]="formConfig.dataTypeRules"
            [extraConfig]="{ selectedItemWithTemplate: { enable: true } }"
          >
            <ng-template let-option="option"> {{ option['label'] }} </ng-template>
          </d-select>
        </d-form-control>
      </d-form-item>
      <d-form-item>
        <d-form-label>{{ 'stdata.dataLength' | translate }}</d-form-label>
        <d-form-control>
          <d-input-number [(ngModel)]="formData.dataLength" name="dataLength" [step]="10" [min]="0" style="width: 100%"></d-input-number>
        </d-form-control>
      </d-form-item>
      <d-form-item>
        <d-form-label>{{ 'stdata.dataPrecision' | translate }}</d-form-label>
        <d-form-control>
          <d-input-number [(ngModel)]="formData.dataPrecision" name="dataPrecision" [min]="0" style="width: 100%"></d-input-number>
        </d-form-control>
      </d-form-item>
      <d-form-item>
        <d-form-label>{{ 'stdata.dataScale' | translate }}</d-form-label>
        <d-form-control>
          <d-input-number [(ngModel)]="formData.dataScale" name="dataScale" [min]="0" style="width: 100%"></d-input-number>
        </d-form-control>
      </d-form-item>
      <d-form-item>
        <d-form-label>{{ 'stdata.nullable' | translate }}</d-form-label>
        <d-form-control>
          <d-select
            [options]="nullableList"
            name="nullable"
            [filterKey]="'label'"
            [allowClear]="false"
            [(ngModel)]="formData.nullable"
            [extraConfig]="{ selectedItemWithTemplate: { enable: true } }"
          >
            <ng-template let-option="option"> {{ option['label'] }} </ng-template>
          </d-select>
        </d-form-control>
      </d-form-item>
      <d-form-item>
        <d-form-label>{{ 'stdata.dataDefault' | translate }}</d-form-label>
        <d-form-control>
          <input dTextInput name="dataDefault" [(ngModel)]="formData.dataDefault" [dValidateRules]="formConfig.dataDefaultRules" />
        </d-form-control>
      </d-form-item>
      <d-form-item>
        <d-form-label>{{ 'stdata.lowValue' | translate }}</d-form-label>
        <d-form-control>
          <input dTextInput name="lowValue" [(ngModel)]="formData.lowValue" />
        </d-form-control>
      </d-form-item>
      <d-form-item>
        <d-form-label>{{ 'stdata.highValue' | translate }}</d-form-label>
        <d-form-control>
          <input dTextInput name="highValue" [(ngModel)]="formData.highValue" />
        </d-form-control>
      </d-form-item>
      <d-form-item>
        <d-form-label>{{ 'stdata.dataSetType' | translate }}</d-form-label>
        <d-form-control>
          <d-select
            name="dataSetType"
            [appendToBody]="true"
            [filterKey]="'dataSetTypeName'"
            [(ngModel)]="formData.dataSetType"
            [searchFn]="searchDataSetType"
            [isSearch]="true"
            [allowClear]="true"
            (loadMore)="loadMoreDataSetType($event)"
            [enableLazyLoad]="true"
            [dValidateRules]="formConfig.dataSetTypeRules"
            [extraConfig]="{ selectedItemWithTemplate: { enable: true } }"
            #dataSetTypeSelect
          >
            <ng-template let-option="option"> {{ option['dataSetTypeCode'] + '-' + option['dataSetTypeName'] }} </ng-template>
          </d-select>
        </d-form-control>
      </d-form-item>
    </div>
    <div class="modal-footer" style="text-align: right; padding-right: 42px">
      <d-form-operation>
        <d-button style="margin-right: 4px" bsStyle="common" (btnClick)="data.onClose($event)">{{
          'app.common.operate.cancel.label' | translate
        }}</d-button>
        <d-button bsStyle="primary" dFormSubmit>{{ 'app.common.operate.confirm.label' | translate }}</d-button>
      </d-form-operation>
    </div>
  </form>
</div>
